<template>
	<view class="clearfix">
		<view class="listItem"
			:class="[currIndex == index ? 'active' : '']"
			v-for="(item,index) in stuList"
			:key="index"
			@tap="selCurrStu(index,item)"
		>
			<view class="listHead">
				<image class="samePar" v-if="item.userPortrait == ''" src="../../../../static/images/defHead.png"></image>
				<image class="samePar" v-else :src="getUrl(item.userPortrait)"></image>
			</view>
			<view class="listName">{{item.realName}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			stuList:Array,
			currIndex:Number
		},
		computed:{
			getUrl(){
				return function(url){
					if(url != undefined){
						return this.zhuXueServer + '/' + url
					}
				}
			}
		},
		methods:{
			selCurrStu(index,item){
				this.$emit('selCurrStu',index,item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.listItem{
		width: 20%;
		float: left;
		text-align: center;
		margin-bottom: 20rpx;
		&.active{
			.listName{
				color: $pss-color-primary_1;
			}
		}
	}
	.listHead{
		border-radius: 50%;
		margin: 0 auto 10rpx;
		@include respTo(phone){
			width: 80rpx;
			height: 80rpx;
		}
		@include respTo(pad){
			width: 60rpx;
			height: 60rpx;
		}
		.samePar{
			border-radius: 50%;
		}
	}
	.listName{
		@include respTo(phone){
			font-size: $font-size28;
		}
		@include respTo(pad){
			font-size: $padSize16;
		}
		color: $pss-text-color3;
	}
</style>